<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>相书保险</title>
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <script src="js/libs/vue2.0.js"></script>
    <script src="js/project.js"></script>
    <style>
        body{background-color: #f2f3f8;padding-top: 44px;}
        /* 顶部区域,布局样式以.g-开头 */
        .g-top{ position:relative;padding:35px 15px 20px;text-align: center; }
        /* 下拉框 */
        .f-select{position:absolute;right:10px;top:8px;display: inline-block;border: solid 1px #d6d8e0;padding: 0 23px 0 9px; border-radius: 4px;background-color: #fff;}
        .f-select:after{    content: " ";  display: inline-block;  -webkit-transform: rotate(135deg);  transform: rotate(135deg);  height: 6px;  width: 6px;  border-width: 2px 2px 0 0;  border-color: #007de2;  border-style: solid;  position: absolute;  top: 7px;  right: 9px;  }
        .f-select .weui_select{height: 24px; line-height: 24px;color: #007de2; padding: 0;}

        /* 表格 */
        .dropdown-menu .weui_cells{padding: 10px 10px;}
        .dropdown-menu .weui_cell{height: 40px;}
        .dropdown-menu .weui_cell:before{display: block;}
        .dropdown-menu .weui_cells .weui_cell:first-of-type::before{display: none;}
        .dropdown-menu .weui_cell_hd{width: 50px;text-align: center;}
        .dropdown-menu .weui_cell_bd{text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        .dropdown-menu .weui_cell_ft{display:inline-block;width: 80px;text-align: center;font-size: 15px;color: #4a527b;white-space: nowrap;}
        .tab-head, .tab-foot{font-size: 15px;color: #333;}

    </style>

</head>
<body>
<div id="app">
    <header class="fixed_top">
        <div class="header_left back">
            <i class="iconfont icon-back"></i>
        </div>
        <div class="header_title">班级详情</div>
        <div class="header_right more">
            <i class="iconfont icon-more"></i>
        </div>
    </header>

    <div v-if="totalNum > 0">
        <div class="g-top">

           <!-- <div class="f-select weui_cell_select">
                <select class="weui_select" name="select1">
                    <option v-for="item in semesters" :value="item.value">{{item.label}}</option>
                </select>
            </div>-->
            <h4 style="font-size: 18px;color: #333;line-height: 1.3;">{{className}}</h4>
            <p style="font-size: 14px;color: #68709a;">总投保({{totalNum}}人)</p>
        </div>
        <!-- 手风琴 -->
        <ul id="accordion" class="accordion">
            <li class="dropdown show">
                <div data-toggle="dropdown">已投保<i class="iconfont icon-fangxiangshang"></i></div>
                <div class="dropdown-menu ">
                    <div class="weui_cells">
                        <!-- 表头 -->
                        <div class="weui_cell tab-head">
                            <div class="weui_cell_hd">姓名</div>
                            <div class="weui_cell_bd weui_cell_primary">投保类型</div>
                            <div class="weui_cell_ft weui_cell_primary">有效期至</div>
                        </div>
                        <!-- 表正文 -->
                        <template v-for="student in students">
                            <div class="weui_cell tab-body">
                                <div class="weui_cell_hd">{{student.insurantName}}</div>
                                <div class="weui_cell_bd weui_cell_primary">{{student.productTitle}}</div>
                                <div class="weui_cell_ft weui_cell_primary">{{student.policyStartTime}}-{{student.policyEndTime}}</div>
                            </div>
                        </template>
                    </div>

                </div>
            </li>
        </ul>

        <a onclick="sendToEmail()" class="weui_btn" style="margin: 30px 15px;">发送表格到邮箱</a>

    </div>

    <div v-else>
        <div style="text-align: center;padding: 20px;">
            <img width="163" height="170" src="./images/status_1.png" alt="">
            <p style="font-size: 16px;line-height:36px;color: #333;">还没有购买记录哦~</p>
        </div>
    </div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
//              /* 具体班级购买情况 */
                className: '一(1)班',
                totalNum: 4,
                students: [
                    {
                        insurantName: '周伦',
                        productTitle: 'Z-100A',
                        policyStartTime: "16.09.01",
                        policyEndTime: "17.08.31",
                        policyDay: "365天"
                    }
                ]
            }
        },
        methods: {
            /* 跳转到班级详情 */
            jumpToDetail: function (id) {
                console.log("班级的id为"+ id);
            }
        },
        created: function () {
            // 获取班级购保数据
            $.get('./data/classData.json', function (data) {
                data.students.forEach(function (item) {
                    item.policyStartTime = item.policyStartTime.slice(2).replace(/-/g,".");
                    item.policyEndTime = item.policyEndTime.slice(2).replace(/-/g,".");
                });
                vm.className = data.className;
                vm.totalNum = data.totalNum;
                vm.students = data.students;
            });
        }
    });

    /* 发送到邮箱 */
    function sendToEmail() {
        $.prompt({
            title: '填写邮箱',
            empty: false, // 是否允许为空
            onOK: function (input) {
                if(!isEmail(input)){
                    showInfo('您输入的邮箱有误,请重新输入');
                    return false
                }
                //点击确认
            },
            onCancel: function () {
                //点击取消
            }
        });
    }
</script>

</body>
</html>